<script>
export default {
  name: 'Statistics'
}
</script>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const { height } = defineProps(['height'])

const chart = ref()

onMounted(() => {
  const myEcharts = echarts.init(chart.value)

  const areaData = [
    {
      name: '虎林园',
      max: 1000,
      value: 350
    },
    {
      name: '五大连池',
      max: 1000,
      value: 500
    },
    {
      name: '镜泊湖',
      max: 1000,
      value: 200
    },
    {
      name: '漠河',
      max: 1000,
      value: 250
    },
    {
      name: '大马戏',
      max: 1000,
      value: 500
    },
    {
      name: '雪乡',
      max: 1000,
      value: 702
    }
  ]
  const data = []
  areaData.forEach(item => {
    data.push(item.value)
  })
  let maxNum = Math.max(...data) //获取数组中最大的值
  // 向上取整十，整百，整千，整万的方法
  function ceilNumber(number) {
    let bite = 0
    if (number < 10) {
      return 10
    }
    while (number >= 10) {
      number /= 10
      bite += 1
    }
    return Math.ceil(number) * Math.pow(10, bite)
  }
  let allMax = ceilNumber(maxNum) //将最大的值进行向上取整
  areaData.forEach(item => {
    item.max = allMax
  })
  const option = {
    color: ['#2E64FF', '#F0D418', '#FF9B42', '#FF6B6B', '#8E42FF', '#00e4ff'],
    legend: {
      trigger: 'item',
      orient: 'vertical',
      top: '0',
      left: '0',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return params.name + ': ' + params.value + '万人次'
      }
    },
    series: [
      {
        type: 'pie',
        right: -100,
        clockwise: false, //逆时针
        data: areaData.map(item => {
          return {
            name: item.name,
            value: item.value
          }
        }),
        radius: ['45%', '95%'],
        label: {
          normal: {
            formatter: '{d}%',
            position: 'inside',
            fontSize: '10',
            color: '#fff'
          }
        }
      }
    ]
  }

  myEcharts.setOption(option)
})
</script>

<template>
  <div
    class="container"
    :style="{ height: isNaN(+height) ? height : height + 'px' }"
  >
    <div class="titleBox">
      <div class="title">
        年度游客量对比
        <div class="titleBg">&nbsp;</div>
      </div>
    </div>
    <div class="contentBox">
      <div
        class="chart"
        ref="chart"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  background-color: red;
  background: url(../../../images/dataScreen-main-rt.png) no-repeat;
  background-size: 100% 100%;
  color: white;

  $boxHeight: 14%;
  .titleBox {
    position: relative;
    width: 100%;
    height: $boxHeight;

    .title {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;

      .titleBg {
        margin-top: 10px;
        background: url(../../../images/dataScreen-title.png) no-repeat;
      }
    }
  }

  .contentBox {
    position: relative;
    width: 100%;
    height: calc(100% - $boxHeight);
    padding: 20px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
